<template>
  <view :class="['qn-page-' + theme]">
    <u-navbar
      :is-back="false"
      title-color="#000000"
      :title-bold="true"
      title-size="36"
      :title="goods_detail.title"
    >
      <view class="back-icon" @click="back"
        ><u-icon name="arrow-left" size="36"></u-icon
      ></view>
    </u-navbar>
    <block v-if="goods_detail.id">
      <!-- 底部菜单 -->
      <view class="footer">
        <view class="icons">
          <view class="box" @click="goPage('/pages/index/index', 'switchTab')">
            <u-icon name="home" size="40"></u-icon>
            <view class="text">首页</view>
          </view>
          <view class="box" @click="collectGoods">
            <u-icon
              :name="goods_detail.isCollect ? 'star-fill' : 'star'"
              size="40"
              :color="goods_detail.isCollect ? '#fa3534' : '#303133'"
            ></u-icon>
            <view class="text">{{ goods_detail.isCollect ? "已收藏" : "收藏" }}</view>
          </view>
          <view class="box" @click="goPage('/pages/cart/cart', 'switchTab')">
            <u-badge
              v-if="cartNum > 0"
              type="error"
              :offset="[-18, -24]"
              :count="cartNum"
            ></u-badge>
            <u-icon name="shopping-cart" size="40"></u-icon>
            <view class="text">购物车</view>
          </view>
        </view>
        <block
          v-if="goods_detail.isDistribution === 4 && goods_detail.inventorTotal <= 0"
        >
          <view
            v-if="
              !(goods_detail.inventorTotal - 0) || goods_detail.inventorTotal - 0 <= 0
            "
            class="btn single-btn"
          >
            <view class="buy" style="background-color: #999 !important; color: #fff"
              >补货中</view
            >
          </view>
        </block>
        <view v-else class="btn">
          <view class="buy primary-fu-bg" @click="openaddcartPop('btn')">立即购买</view>
          <view class="buy primary-bg" @click="openaddcartPop('btn')">加入购物车</view>
        </view>
      </view>
      <!-- 商品主图轮播 -->
      <view class="swiper-box">
        <swiper circular="true" autoplay="true" @change="swiperChange">
          <swiper-item v-for="(item, index) in imgList" :key="index">
            <image :src="item" mode="aspectFit" @click="previewImage(index)"></image>
          </swiper-item>
        </swiper>
        <view class="indicator">{{ currentSwiper + 1 }}/{{ imgList.length }}</view>
      </view>
      <!-- 标题 价格 -->
      <view class="goods-info">
        <view class="goods-info-main">
          <!-- 限时秒杀 -->
          <view
            class="price-view clearfix active-view"
            v-if="now_sku_data.isActivity === 5"
          >
            <view class="float_left active-left">
              <view class="active-left-top">
                <block v-if="!showGoodsPrice">
                  <view style="display: inline-block">
                    <text class="rmb-ic">¥</text>
                    <!-- 选择规格 -->
                    <view v-if="now_sku_data.id" style="display: inline-block">
                      <rich-text
                        v-if="now_sku_data.havActivity === 5"
                        :nodes="
                          $_utils.splitPrice(now_sku_data.activity.activityPrice, 12)
                        "
                      ></rich-text>
                      <rich-text
                        v-else-if="now_sku_data.enabledLadder === 1"
                        :nodes="$_utils.splitPrice(ladderPriceChange(), 12)"
                      ></rich-text>
                      <rich-text
                        v-else
                        :nodes="$_utils.splitPrice(now_sku_data.salePrice, 12)"
                      ></rich-text>
                    </view>
                    <!-- 没有选择规格 -->
                    <block v-else>
                      <view style="display: inline-block" v-if="goods_detail.isEq === 4">
                        <rich-text
                          :nodes="$_utils.splitPrice(goods_detail.minSalePrice, 12)"
                        ></rich-text>
                      </view>
                      <view v-else style="display: inline-block">
                        <rich-text
                          :nodes="$_utils.splitPrice(goods_detail.maxSalePrice, 12)"
                        ></rich-text>
                      </view>
                    </block>
                  </view>
                  <text class="market-price">￥{{ goods_detail.maxMarketPrice }}</text>
                </block>
                <view style="display: inline-block" class="showGoodsPrice" v-else
                  >{{ showGoodsPrice }}
                </view>
              </view>
              <view class="goods-num">
                <view class="num-li" v-if="base_set_info.isSalesNum === 5"
                  >已售{{ now_sku_data.realSalesNum || goods_detail.realSalesNum }}</view
                >
                <view class="num-li" v-if="base_set_info.stockDisplay !== 4">
                  库存
                  <block v-if="base_set_info.stockDisplay === 5">
                    <text v-if="goods_detail.isEq !== 5">{{
                      (now_sku_data.inventory || goods_detail.inventory) >= 1
                        ? "有货"
                        : "库存不足"
                    }}</text>
                    <text v-else>{{
                      eq_sku_jian.inventory >= 1 ? "有货" : "库存不足"
                    }}</text>
                  </block>
                  <!-- 抄码商品直接展示辅助单位的库存 -->
                  <text v-if="base_set_info.stockDisplay === 6">
                    {{
                      goods_detail.isEq === 5
                        ? Math.floor(eq_sku_jian.otherNum)
                        : Math.floor(now_sku_data.inventory || goods_detail.inventory)
                    }}
                  </text>
                </view>
              </view>
            </view>
            <view class="float_right active-right clearfix">
              <view class="ac-r-left float_left">
                <view class="active-ic">
                  <text class="ibonfont ibonshijian"></text>
                  <text>限时秒杀</text>
                </view>
                <view class="active-desc"
                  >每人限购{{ now_sku_data.activity.limitNum
                  }}{{ now_sku_data.unitName }}</view
                >
              </view>
              <view class="ac-r-right float_right">
                <view class="time-title">距离结束时间</view>
                <view class="count-down">
                  <block v-if="phaseTime.day > 0">
                    <text class="day-num">{{ phaseTime.day }}</text>
                    <text class="day-text">天</text>
                  </block>

                  <u-count-down
                    height="40"
                    color="#ffffff"
                    separator-size="36"
                    font-size="26"
                    border-color="#000000"
                    bg-color="#000000"
                    separator-color="#000000"
                    :timestamp="phaseTime.second"
                    :show-days="false"
                  ></u-count-down>
                </view>
              </view>
            </view>
          </view>
          <!-- 商品信息 -->
          <view class="price-view clearfix" v-else>
            <view class="price-out" v-if="isLogin">
              <block v-if="!showGoodsPrice">
                <view style="display: inline-block">
                  <text class="rmb-ic">¥</text>
                  <!-- 选择规格 -->
                  <view v-if="now_sku_data.id" style="display: inline-block">
                    <rich-text
                      v-if="now_sku_data.havActivity === 5"
                      :nodes="$_utils.splitPrice(now_sku_data.activity.activityPrice, 12)"
                    ></rich-text>
                    <rich-text
                      v-else-if="now_sku_data.enabledLadder === 1"
                      :nodes="$_utils.splitPrice(ladderPriceChange(), 12)"
                    ></rich-text>
                    <rich-text
                      v-else
                      :nodes="$_utils.splitPrice(now_sku_data.salePrice, 12)"
                    ></rich-text>
                  </view>
                  <!-- 没有选择规格 -->
                  <block v-else>
                    <view style="display: inline-block" v-if="goods_detail.isEq === 4">
                      <rich-text
                        :nodes="$_utils.splitPrice(goods_detail.minSalePrice, 12)"
                      ></rich-text>
                    </view>
                    <view v-else style="display: inline-block">
                      <rich-text
                        :nodes="$_utils.splitPrice(goods_detail.maxSalePrice, 12)"
                      ></rich-text>
                    </view>
                  </block>
                </view>
                <view
                  class="vip-price clearfix"
                  v-if="goods_detail.minMemberPrice > 0 && !now_sku_data.id"
                >
                  <view class="price-text"
                    >¥{{
                      goods_detail.isEq === 5
                        ? goods_detail.maxMemberPrice
                        : goods_detail.minMemberPrice
                    }}</view
                  >
                  <view class="price-bs">vip</view>
                </view>
                <block v-else>
                  <view class="vip-price clearfix" v-if="now_sku_data.memberPrice > 0">
                    <view class="price-text">¥{{ now_sku_data.memberPrice }}</view>
                    <view class="price-bs">vip</view>
                  </view>
                </block>
              </block>
              <view style="display: inline-block" class="showGoodsPrice" v-else
                >{{ showGoodsPrice }}
              </view>
              <view class="market-price">￥{{ goods_detail.maxMarketPrice }}</view>
            </view>
			<view class="price-out" v-else>
				<view class="price-text">登录后查看价格</view>
			</view>
            <view class="right-view">
              <view class="goods-num">
                <view class="num-li" v-if="base_set_info.isSalesNum === 5"
                  >已售{{ now_sku_data.realSalesNum || goods_detail.realSalesNum }}</view
                >
                <view class="num-li" v-if="base_set_info.stockDisplay !== 4">
                  库存
                  <!-- 抄码商品直接展示辅助单位的库存 -->
                  <block v-if="base_set_info.stockDisplay === 5">
                    <text v-if="goods_detail.isEq !== 5">{{
                      (now_sku_data.inventory || goods_detail.inventory) > 0
                        ? "有货"
                        : "库存不足"
                    }}</text>
                    <text v-else>{{
                      eq_sku_jian.inventory >= 1 ? "有货" : "库存不足"
                    }}</text>
                  </block>
                  <text v-if="base_set_info.stockDisplay === 6">
                    {{
                      goods_detail.isEq === 5
                        ? Math.floor(eq_sku_jian.otherNum)
                        : Math.floor(now_sku_data.inventory || goods_detail.inventory)
                    }}
                  </text>
                </view>
              </view>
            </view>
          </view>
          <view class="lap-info" v-if="false">
            <view
              class="lap-li"
              v-for="(item, index) in now_sku_data.ladderPrice"
              :key="index"
            >
              <view class="laprice-text">
                <text class="rmb-icon">￥</text>
                <text>{{ item.price }}</text>
              </view>
              <view
                class="laprice-goods-num"
                v-if="index + 1 === now_sku_data.ladderPrice.length"
                >≥{{ item.from }}{{ now_sku_data.unitName }}</view
              >
              <view class="laprice-goods-num" v-else
                >{{ item.from }}~{{ item.to }}{{ now_sku_data.unitName }}</view
              >
            </view>
          </view>
          <view class="clearfix top-title">
            <view class="title float_left ellipsis">
              <view class="goods-brand primary-bg" v-if="goods_detail.isEq === 5"
                >抄码</view
              >
              <view class="goods-brand primary-bg" v-if="goods_detail.brandName">{{
                goods_detail.brandName
              }}</view>
              {{ goods_detail.title || "" }}
            </view>
            <!-- #ifdef MP-WEIXIN -->
            <view @click="shareGoods" class="float_right share-btn">
              <view><u-icon name="share-fill" size="36"></u-icon></view>
              <view>分享</view>
            </view>
            <!-- #endif -->
          </view>

          <view class="describe ellipsis">{{ goods_detail.describe }}</view>
          <!-- 活动 -->
          <view class="active-box" v-if="now_sku_data.isActivity === 5">
            <view class="row">
              <view class="text">活动</view>
              <view class="content">
                <view class="ac-li">
                  <view class="ac-label">限时秒杀</view>
                  <view class="ac-activityTitle">{{ now_sku_data.activity.title }}</view>
                  <view class="ac-value">
                    商品活动数量
                    <text class="ac-p">{{ now_sku_data.activity.activityNum }}</text>
                    {{ now_sku_data.unitName }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--规则选择 -->
      <view class="info-box" style="margin-top: 0">
        <view class="row" v-if="goods_detail.unitData.length > 1">
          <view class="text">换算</view>
          <view class="content">
            <block v-for="(item, index) in goods_detail.unitData" :key="index">
              <view v-if="item.isMaster === 4" class="conversion">
                <text v-if="goods_detail.isEq === 5"
                  >1{{ item.unitName }}≈{{ item.conversion
                  }}{{ goods_detail.unitName }}</text
                >
                <text v-else
                  >1{{ item.unitName }}={{ item.conversion
                  }}{{ goods_detail.unitName }}</text
                >
              </view>
            </block>
          </view>
        </view>
        <view class="row" @click="openaddcartPop">
          <view class="text">已选</view>
          <view class="content">
            <text v-if="!now_sku_data.id" class="no-sel">请选择规格</text>
            <view v-else>
              <text>{{ buy_num }}{{ now_sku_data.unitName }};</text>
              <block v-for="(item, index) in now_sku_data.specGroup" :key="index">
                <text v-if="index > 0" style="padding: 0 10upx">/</text>
                <text>{{ item.specValueName }}</text>
              </block>
              <text v-if="goods_detail.isEq === 5"
                >{{ unitsalePrice }}元/{{ eq_sku_kg.unitName }}</text
              >
            </view>
          </view>
          <view class="arrow">
            <view class="icon ibonfont ibonjinru"></view>
          </view>
        </view>
        <view class="row" v-if="goods_detail.expressType === 1">
          <view class="text">运费</view>
          <view class="content">
            <text>包邮</text>
            <!-- <text>{{ goods_detail.expressFee > 0 ? goods_detail.expressFee + '元' : '免运费' }}</text> -->
            <!-- <text style="font-size: 24rpx;">（请以提交订单为准）</text> -->
          </view>
        </view>
        <view class="row" @click="openService" v-if="goods_detail.support.length">
          <view class="text">服务</view>
          <view class="content">
            <view
              class="service-li"
              v-for="(item, index) in goods_detail.support"
              :key="index"
            >
              <text
                v-if="!item.Icon"
                class="ibonfont ibonjiarushoucang primary-color service-icon"
              ></text>
              <image v-else class="icon" :src="item.Icon" mode="aspectFill"></image>
              <text>{{ item.servicesName }}</text>
            </view>
          </view>
          <view class="arrow">
            <view class="icon ibonfont ibonjinru"></view>
          </view>
        </view>
      </view>
      <!-- 组合套餐 -->
      <view class="info-box" v-if="total > 0 && isLogin && combinedPackage.length > 0">
        <view class="row">
          <view class="text">组合套餐</view>
          <view class="content">
            <text
              >{{ total }}组套餐,最多可省￥{{
                combinedPackage[0].originPrice - combinedPackage[0].price - 0
              }}</text
            >
          </view>
        </view>
        <view class="group-ul" v-for="(item, index) in combinedPackage" :key="index">
          <view
            class="group-li clearfix"
            @click="goPage('/pageT/goodsGroup/goodsGroupDetail?id=' + item.id)"
          >
            <view class="float_left">
              <scroll-view scroll-x="true" class="left-scroll">
                <view class="goods-ul">
                  <block v-for="(item1, index1) in item.goodsData" :key="index1">
                    <view class="goods-li">
                      <image :src="item1.images[0]" mode="aspectFill"></image>
                      <view class="goods-name ellipsis">{{ item1.title }}</view>
                    </view>
                    <view class="plus-icon" v-if="index1 !== item.goodsData.length - 1">
                      <u-icon name="plus" color="#cecece" size="28"></u-icon>
                    </view>
                  </block>
                </view>
              </scroll-view>
            </view>
            <view class="float_left dy-icon"
              ><text class="ibonfont ibonicon"></text
            ></view>
            <view class="float_left price-right">
              <view class="group-price">
                <text>套餐价</text>
                <text class="primary-color">¥{{ item.price - 0 }}</text>
              </view>
              <view class="save-price primary-color"
                >可省¥{{ item.originPrice - item.price - 0 }}</view
              >
              <view class="buy-btn primary-bg">立即购买</view>
            </view>
          </view>
        </view>
        <view class="setMeal_more" @click="is_setMeal_show = true">
          <text style="margin-right: 10rpx">查看更多套餐</text>
          <u-icon name="arrow-right" size="24"></u-icon>
        </view>
      </view>
      <!-- 详情 -->
      <view class="description">
        <view class="title">———— 商品详情 ————</view>
        <view class="content">
          <u-parse :html="goods_detail.content || goods_detail.description"></u-parse>
        </view>
      </view>
    </block>
    <u-popup mode="bottom" v-model="sharePop">
      <view class="share-tit">分享</view>
      <view class="share-ul">
        <!-- #ifdef MP -->
        <view class="share-li">
          <button class="share-btn" open-type="share">
            <view class="icon-view">
              <u-icon name="weixin-fill" top="12" color="#ffffff" size="60"></u-icon>
            </view>
            <view class="share-btn-label">分享给好友</view>
          </button>
        </view>
        <!-- #endif -->
        <view class="share-li" @click="generatePoster">
          <button class="share-btn">
            <view class="icon-view">
              <u-icon name="photo-fill" top="12" color="#ffffff" size="60"></u-icon>
            </view>
            <view class="share-btn-label">生成分享海报</view>
          </button>
        </view>
      </view>
      <view class="share-cancel" @click="cancelPop">取消分享</view>
    </u-popup>
    <!-- 商品服务 -->
    <u-popup
      mode="bottom"
      v-model="service_pop"
      border-radius="12"
      closeable
      close-icon-color="#222222"
    >
      <view class="service-pop">
        <view class="title">商品服务</view>
        <view class="service-ul">
          <view
            class="service-li ellipsis"
            v-for="(item, index) in goods_detail.support"
            :key="index"
          >
            <view>
              <text
                v-if="!item.Icon"
                class="ibonfont ibonjiarushoucang primary-color"
              ></text>
              <image v-else class="icon" :src="item.Icon" mode="aspectFill"></image>
              <text class="text">{{ item.servicesName }}</text>
            </view>
            <view class="desc ellipsis">{{ item.describe }}</view>
          </view>
        </view>
        <view class="primary-btn confirm-btn" @click="cancelService">确定</view>
      </view>
    </u-popup>
    <!-- 海报 -->
    <u-popup
      class="no-pop-bg"
      v-model="canvasPop"
      mode="center"
      :border-radius="12"
      :mask-close-able="false"
    >
      <view v-if="imgList.length && QrSrc && is_poster">
        <wm-poster
          :Width="600"
          :imgSrc="imgList[0]"
          :QrSrc="QrSrc"
          :Title="goods_detail.title"
          :PriceTxt="!showGoodsPrice ? '¥' + goods_detail.salePrice : ''"
          :OriginalTxt="!showGoodsPrice ? '¥' + goods_detail.marketPrice : ''"
          @saveImage="saveImage"
          @cancelImg="cancelImg"
        ></wm-poster>
      </view>
    </u-popup>
    <!-- 加载动画 -->

    <!-- 加入购物车弹窗 -->
    <AddCardModel
      :isList="false"
      :selAddress="now_sel_address"
      @buyNumchange="buyNumchange"
      @skuChange="skuChange"
      @close="is_add_show = false"
      @change="closeaddcartPop"
      :skuId="skuId"
      :isShow="is_add_show"
      :goodsId="goods_id"
    />
    <setMealMore
      :goods_id="goods_id"
      :shopId="goods_detail.shopId"
      :isShow="is_setMeal_show"
      @close="is_setMeal_show = false"
    />
  </view>
</template>

<script>
import wmPoster from "../components/wm-poster/wm-poster.vue";
import webUrl from "../../config.js";
import AddCardModel from "@/components/AddCardModel";
import setMealMore from "@/components/setMealMore";
export default {
  components: {
    wmPoster,
    AddCardModel,
    setMealMore,
  },
  computed: {
    cartNum() {
      return this.$store.state.cartNum;
    },
    showGoodsPrice() {
      if (this.$store.state.baseSet.goodsPrice === 5 && this.$common.isLogin()) {
        return "";
      } else if (!this.$common.isLogin() && this.$store.state.baseSet.goodsPrice === 4) {
        return "请登录";
      } else if (
        this.$store.state.userStatus.enableStatus === 4 &&
        this.$store.state.baseSet.goodsPrice === 4
      ) {
        return "已禁用";
      } else if (
        this.$store.state.userStatus.status !== 2 &&
        this.$store.state.baseSet.goodsPrice === 4
      ) {
        if (this.$store.state.userStatus.status === 0) {
          return "待审核";
        } else if (this.$store.state.userStatus.status === 1) {
          return "审核中";
        } else if (this.$store.state.userStatus.status === 3) {
          return "已驳回";
        }
      } else {
        return "";
      }
    },
    isLogin() {
      return this.$store.state.hasLogin;
    },
    // 辅助单位价格
    unitsalePrice() {
      if (this.goods_detail.isEq === 5 && this.eq_sku_kg.id) {
        if (this.eq_sku_kg.enabledLadder !== 1) {
          return this.eq_sku_kg.salePrice;
        } else {
          const unitnum = this.buy_num * Number(this.now_sku_data.conversion);
          const priceData = this.eq_sku_kg.ladderPrice.find((item) => {
            return unitnum > item.from && unitnum <= item.to;
          });
          return priceData ? priceData.price : 0;
        }
      } else {
        return this.eq_sku_kg.salePrice || 0;
      }
    },
  },
  data() {
    return {
      eq_sku_kg: {}, // 抄码商品kg
      eq_sku_jian: {}, // 抄码商品辅助单位
      //轮播图下标
      currentSwiper: 0,
      service_pop: false,
      sharePop: false, // 分享弹窗
      canvasPop: false, // 海报弹窗
      now_sel_address: {},
      is_not_express: true, // 当前选择区域是否能够配送
      address_data: {}, // 客户地址数据
      not_dispatch_areas: {}, // 该商品不能配送区域
      is_add_show: false,
      is_poster: false,
      buy_num: 1,
      discountList: [],
      activity: [],
      maskState: false,
      indicatorDots: true, //是否显示面板指示点
      autoplay: true, //是否自动切换
      interval: 2000,
      duration: 500,
      goods_detail: {},
      goods_id: "",
      unit_list: [],
      uni_index: 0,
      specClass: "none",
      specSelected: [],
      specList: [],
      isCollect: false,
      imgList: [],
      phaseTime: {
        second: 0,
        day: 0,
      },
      coupon_price: "", //领券活动价格
      skuId: "", //商品的规格
      source: 5,
      QrSrc: "",
      base_set_info: {},
      spec_id_group: [],
      now_sku_data: {},
      startDeliveryPrice: 0,
      isSalesNum: 4, // 起送价
      pageName: "", // 启动页标示
      is_setMeal_show: false, //组合套餐弹窗
      combinedPackage: [],
      total: 0,
      shopId: "",
    };
  },
  onShow() {
    if (this.now_sel_address.provinceCode) {
      this.address_data = this.now_sel_address;
      if (this.not_dispatch_areas.areas) {
        if (this.address_data.districtCode) {
          this.is_not_express =
            this.not_dispatch_areas.areas.indexOf(
              parseInt(this.address_data.districtCode)
            ) === -1;
        } else if (this.address_data.cityCode) {
          this.is_not_express =
            this.not_dispatch_areas.citys.indexOf(
              parseInt(this.address_data.cityCode)
            ) === -1;
        } else {
          this.is_not_express =
            this.not_dispatch_areas.provinces.indexOf(
              parseInt(this.address_data.provinceCode)
            ) === -1;
        }
      }
    }
  },
  onShareAppMessage() {
    return {
      title: this.goods_detail.title,
      path: `/pagesT/product/product?id=${this.goods_id}&businessmanId=${
        this.$store.state.userStatus.id || ""
      }`,
      imageUrl: this.imgList[0],
      success: (res) => {
        console.log(res);
      },
    };
  },
  // #ifdef MP-WEIXIN
  // 分享到朋友圈
  onShareTimeline(obj) {
    console.log("分享到朋友圈::", obj);
  },
  // 收藏小程序
  onAddToFavorites() {},
  // #endif
  watch: {
    async "$store.state.locationObj"(val) {
      if (JSON.stringify(val) === "{}") {
        this.getAuthorizeInfo();
        return;
      }
      await this.getGoodsDetail();
      await this.getQrSrc();
    },
    isLogin() {
      this.getGoodsDetail();
    },
  },
  async onLoad(options) {
    try {
      if (options.pageName) {
        this.pageName = options.pageName;
      }
      // 起送价
      this.startDeliveryPrice = this.$store.state.baseSet.startDeliveryPrice || 0;
      // #ifdef MP-WEIXIN
      // 小程序的原生菜单中显示分享按钮
      uni.showShareMenu({
        withShareTicket: false,
        menus: ["shareAppMessage", "shareTimeline"],
      });
      //  获取小程序分销商参数
      if (options.businessmanId) {
        this.$store.commit("commit_businessmanId", options.businessmanId);
        this.relationshipBusinessman(options.businessmanId);
      }
      // #endif
      // 接收传值
      if (options.id) {
        console.log(options.id, "options.id");
        this.goods_id = options.id;
      } else {
        // 扫码进入
        const scene = decodeURIComponent(options.scene);
        this.goods_id = scene;
      }
      if (options.skuId) {
        this.skuId = parseInt(options.skuId);
      }
      // this.goods_id = 78;
      this.spec_id_group[0] = this.goods_id;
      this.base_set_info = this.$store.state.baseSet;

      console.log(JSON.stringify(this.$store.state.locationObj), "options.skuId");
      // if (JSON.stringify(this.$store.state.locationObj) === '{}') {
      // 	this.getAuthorizeInfo();
      // 	return;
      // }

      console.log(options.skuId, "options.skuId2");
      this.getGoodsDetail();

      console.log(this.isLogin, "this.isLogin");

      if (this.isLogin) {
        this.address_data = this.$store.state.nowAddress;
        if (this.address_data.provinceCode) {
          if (this.not_dispatch_areas.areas) {
            if (this.address_data.districtCode) {
              this.is_not_express =
                this.not_dispatch_areas.areas.indexOf(
                  parseInt(this.address_data.districtCode)
                ) === -1;
            } else if (this.address_data.cityCode) {
              this.is_not_express =
                this.not_dispatch_areas.citys.indexOf(
                  parseInt(this.address_data.cityCode)
                ) === -1;
            } else {
              this.is_not_express =
                this.not_dispatch_areas.provinces.indexOf(
                  parseInt(this.address_data.provinceCode)
                ) === -1;
            }
          }
        } else {
          await this.getAllShippingAddress();
        }
      }
      await this.getQrSrc();
    } catch (error) {
      console.log(error, "error");
    }
  },
  methods: {
    openService() {
      this.service_pop = true;
    },
    // 商品服务弹窗
    cancelService() {
      this.service_pop = false;
    },
    // 获取地址列表
    getAllShippingAddress() {
      this.$u.api
        .getAllShippingAddress({
          page: 1,
          pageSize: 10,
        })
        .then(({ data }) => {
          if (data.length) {
            const address = data.find((item) => item.defaultStatus === 5) || data[0];
            this.address_data = {
              provinceCode: address.provinceCode,
              cityCode: address.cityCode,
              districtCode: address.districtCode,
              provinceName: address.area.provinceName,
              cityName: address.area.cityName,
              districtName: address.area.districtName,
            };
            this.$store.commit("commit_nowAddress", this.address_data);
            if (this.not_dispatch_areas.areas) {
              if (this.address_data.districtCode) {
                this.is_not_express =
                  this.not_dispatch_areas.areas.indexOf(
                    parseInt(this.address_data.districtCode)
                  ) === -1;
              } else if (this.address_data.cityCode) {
                this.is_not_express =
                  this.not_dispatch_areas.citys.indexOf(
                    parseInt(this.address_data.cityCode)
                  ) === -1;
              } else {
                this.is_not_express =
                  this.not_dispatch_areas.provinces.indexOf(
                    parseInt(this.address_data.provinceCode)
                  ) === -1;
              }
            }
          }
        });
    },
    // 修改购买金额
    buyNumchange(val) {
      this.buy_num = val;
    },
    // 切换商品规格属性
    skuChange(val) {
      this.now_sku_data = val;
      if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
        let nowData = parseInt(new Date().getTime() / 1000);
        if (
          this.now_sku_data.activity.endTime &&
          this.now_sku_data.activity.endTime - nowData > 0
        ) {
          let totalSecond = this.now_sku_data.activity.endTime - nowData;
          this.phaseTime = {
            second: totalSecond % 86400,
            day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400),
          };
        }
      }
    },
    // 收藏商品
    collectGoods() {
      if (!this.isLogin) {
        this.$api.msg("请登录");
        return;
      }
      if (this.goods_detail.isCollect) {
        this.goods_detail.isCollect = false;
      } else {
        this.goods_detail.isCollect = true;
      }
      this.$u.api.collectGoods(this.goods_id).then((res) => {
        if (!this.goods_detail.isCollect) {
          this.$api.msg("已取消收藏");
        } else {
          this.$api.msg("已收藏");
        }
      });
    },

    getQrSrc() {
      // #ifdef MP-TOUTIAO
      let pathT = "pagesT/product/product?id=" + this.goods_id;
      pathT = encodeURIComponent(pathT);
      this.$u.api
        .byteCreateQRCode({
          path: pathT,
          params: this.goods_id,
          appname: "toutiao",
        })
        .then((data) => {
          this.QrSrc =
            data.data.indexOf("https") > -1 ? data.data : webUrl.QRC_SRC + data.data;
        });
      // #endif
      // #ifdef MP-WEIXIN || H5
      let pathS = "pagesT/product/product";
      this.$u.api
        .createwxaqrcode({
          path: pathS,
          params: this.goods_id,
        })
        .then((data) => {
          this.QrSrc =
            data.data.indexOf("https") > -1 ? data.data : webUrl.QRC_SRC + data.data;
          console.log(this.QrSrc);
        });
      // #endif
    },
    handelImg(url) {
      if (url.indexOf("?imageView2/2/w/750/h/750") > -1) {
        return url.replace("?imageView2/2/w/750/h/750", "");
      } else if (url.indexOf("?imageView2/2/w/750") > -1) {
        return url.replace("?imageView2/2/w/750", "");
      } else {
        return url;
      }
    },
    generatePoster() {
      // this.is_poster = true;
      // this.canvasPop = true;
      // this.sharePop = false;
      const pramas = {
        id: this.goods_detail.id,
        priceShop: "¥" + this.goods_detail.maxMarketPrice,
        headImgs: this.goods_detail.images.map((item) => this.handelImg(item)),
        goodsImg: this.handelImg(this.goods_detail.images[0]),
        goodsName: this.goods_detail.title,
        goodsPrice: "¥" + this.goods_detail.minSalePrice,
        mainLogo: "",
        recommendCodeGoods: this.QrSrc,
        share: {
          shareContent: this.$store.state.baseSet.shop || "",
          shareImg: this.handelImg(this.goods_detail.images[0]),
          shareTitle: this.goods_detail.title,
          shareUrl: this.handelImg(this.goods_detail.images[0]),
        },
      };
      uni.setStorageSync("posterData", pramas);
      uni.navigateTo({
        url: "/pagesT/product/goodsPoster",
      });
    },
    saveImage() {
      this.canvasPop = false;
    },
    cancelImg() {
      this.is_poster = false;
      this.canvasPop = false;
    },
    shareGoods() {
      this.sharePop = true;
    },
    //App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
    shareFriend() {
      const path = "/pagesT/product/product?id=" + this.goods_id;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        imageUrl: this.imgList[0],
        title: this.goods_detail.title,
        miniProgram: {
          id: "gh_16db94f79967", //微信小程序原始ID
          path: path,
          type: 0,
          webUrl: "",
        },
        success: (ret) => {
          console.log(JSON.stringify(ret));
        },
      });
    },
    // 分享弹窗关闭
    cancelPop() {
      this.sharePop = false;
    },
    // 如果是阶梯价
    ladderPriceChange() {
      return this.now_sku_data.ladderPrice.find(
        (ladder) => (this.buy_num || 1) >= ladder.from && (this.buy_num || 1) <= ladder.to
      ).price;
    },
    // 请求商品品详情
    async getGoodsDetail() {
      this.$u.api
        .getGoodsDetail(this.goods_id)
        .then(({ data }) => {
          uni.setNavigationBarTitle({
            title: data.title,
          });
          this.imgList = data.images;
          data.specGroup = data.specGroup.map((item) => {
            return {
              ...item,
              params: item.params.map((itemP) => {
                return {
                  ...itemP,
                  isdisabled: true,
                };
              }),
            };
          });
          this.goods_detail = data;
          // 抄码商品获取 KG 数据
          if (data.isEq === 5) {
            this.eq_sku_kg = data.specMultiple.find((item) => item.isMaster === 5);
            this.eq_sku_jian = data.specMultiple.find((item) => item.isMaster === 4);
          }
          this.not_dispatch_areas = data.express.ruleData.not_dispatch_areas;
          if (this.skuId) {
            // 如果已有选中的skuId 根据ID匹配对应规格数据
            const specMultiple = data.specMultiple.find(
              (item) => item.id === parseInt(this.skuId)
            );
            if (specMultiple.isSale !== 4) {
              this.now_sku_data = specMultiple;
            }
          } else if (
            data.specMultiple.length === 1 &&
            data.specMultiple[0].isSale !== 4
          ) {
            this.now_sku_data = data.specMultiple[0];
          } else {
            // 如果当前商品是非抄码商品 默认选中默认规格
            if (data.isEq === 4) {
              const specMultiple = data.specMultiple.find((item) => item.isDefault === 5);
              if (specMultiple && specMultiple.isSale !== 4) {
                this.now_sku_data = specMultiple;
              }
            } else {
              // 抄码商品默认选中一个
              const specMultiple = data.specMultiple.find((item) => item.isMaster === 4);
              if (specMultiple && specMultiple.isSale !== 4) {
                this.now_sku_data = specMultiple;
              }
            }
          }
          if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
            let nowData = parseInt(new Date().getTime() / 1000);
            if (
              this.now_sku_data.activity.endTime &&
              this.now_sku_data.activity.endTime - nowData > 0
            ) {
              let totalSecond = this.now_sku_data.activity.endTime - nowData;
              this.phaseTime = {
                second: totalSecond % 86400,
                day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400),
              };
            }
          }
          // 获取该商品的组合套餐
          if (this.isLogin) {
            this.listsApiComBinPackage();
          }
        })
        .catch((err) => {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        });
    },
    //分享
    share() {
      this.$refs.share.toggleMask();
    },
    openaddcartPop(type) {
      if (!this.is_not_express) return;
      this.is_add_show = true;
    },
    // 关闭加入购物车弹窗
    closeaddcartPop(obj) {
      if (!obj.show) {
        this.is_add_show = false;
      }
    },
    previewImage(index) {
      let urls = JSON.parse(JSON.stringify(this.imgList));
      if (index > 0) {
        urls.unshift(urls[index]);
      }
      uni.previewImage({
        urls: urls,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: (data) => {
            console.log(
              "选中了第" + (data.tapIndex + 1) + "个按钮,第" + (data.index + 1) + "张图片"
            );
          },
          fail: (err) => {
            console.log(err.errMsg);
          },
        },
      });
    },
    //轮播图指示器
    swiperChange(event) {
      this.currentSwiper = event.detail.current;
    },
    back() {
      if (this.pageName) {
        this.goPage("/pages/index/index", "switchTab");
      } else {
        uni.navigateBack();
      }
    },
    // 获取该商品的组合套餐
    listsApiComBinPackage() {
      if (!this.goods_detail.shopId) return;
      this.$u.api
        .listsApiComBinPackage({
          page: 1,
          pageSize: 10,
          shopId: this.goods_detail.shopId,
          goodsId: this.goods_id,
        })
        .then(({ data }) => {
          this.shopId = this.goods_detail.shopId;
          this.combinedPackage = data;
          this.total = data.length;
        });
    },
    // #ifdef MP
    // 添加分销上下级关系 source: 1:首次点击链接 2:首次下单 3:首次付款'
    async relationshipBusinessman(businessmanId) {
      console.log("上级ID", businessmanId);
      if (!this.$store.state.hasLogin) {
        // 没有登录不请求接口
        return;
      }
      await this.$u.api.relationshipBusinessman({
        businessmanId: businessmanId,
        source: 1,
      });

      console.log("上下:", data.data);
    },
    // #endif
  },
};
</script>

<style lang="scss">
@keyframes showPopup {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes hidePopup {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes showLayer {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes hideLayer {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.icon {
  font-size: 26upx;
}

.back-icon {
  font-size: 36rpx;
  padding-left: 24rpx;
  color: #2a2a2a;
}

.swiper-box {
  background-color: #ffffff;
  position: relative;
  width: 100%;
  height: 100vw;

  swiper {
    width: 100%;
    height: 100vw;

    swiper-item {
      image {
        width: 100%;
        height: 100vw;
        background-color: #f5f5f5;
      }
    }
  }

  .indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25upx;
    height: 40upx;
    border-radius: 4upx;
    font-size: 22upx;
    position: absolute;
    bottom: 50upx;
    right: 30upx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.goods-info {
  padding: 0 0rpx 70rpx;
  background-color: #f5f5f5;

  .price-view {
    padding: 20rpx 0;
    height: auto;
    background-color: transparent;
    color: #fa6400;
    border-radius: 0;
    position: relative;

    .price-out {
      position: static;
      transform: none;
      font-size: 48rpx;
      font-family: DIN-Medium;
      color: #e02020;

      .rmb-ic {
        font-size: 24rpx;
      }

      .market-price {
        text-decoration: line-through;
        font-size: 24upx;
        color: #999;
        opacity: 0.6;
        font-weight: 400;
      }

      .vip-price {
        display: inline-block;
        margin-left: 20rpx;
        line-height: 32rpx;
        height: 32rpx;
        border-radius: 4rpx;
        overflow: hidden;
        font-family: DINPro-Regular;

        .price-text {
          float: left;
          min-width: 80rpx;
          text-align: center;
          vertical-align: middle;
          font-size: 20rpx;
          color: #ffdfa2;
          background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
          padding: 0 8rpx;
        }

        .price-bs {
          text-align: center;
          float: left;
          vertical-align: middle;
          width: 32rpx;
          background-color: #ffdfa2;
          font-size: 20rpx;
          color: #2c7564;
        }
      }
    }

    .right-view {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24rpx;
      color: #999;

      .goods-num {
        text-align: right;

        .num-li {
          display: inline-block;
          font-weight: 400;
          margin-left: 20rpx;
        }
      }
    }
  }

  .active-view {
    padding: 20rpx 0;
    overflow: hidden;

    // 限时秒杀样式
    .active-left {
      padding-left: 0;
      width: 270rpx;
      line-height: normal;
      padding-top: 0;
      color: #e02020;

      .goods-num {
        height: 28rpx;
        line-height: 28rpx;
        display: flex;
        color: #999;

        .num-li {
          font-weight: 400;
          margin-right: 20rpx;
          font-size: 20rpx;
        }
      }

      .market-price {
        text-decoration: line-through;
        font-size: 24upx;
        color: #999;
        opacity: 0.6;
        font-weight: 400;
      }
    }

    .active-right {
      padding: 0;
      width: auto;
      background-color: transparent;
      height: auto;
      padding-left: 0;
      padding-top: 0;

      .ac-r-left {
        .active-ic {
          height: 32rpx;
          line-height: 32rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #e02020;

          .ibonshijian {
            font-size: 32rpx;
            font-weight: normal;
            margin-right: 6rpx;
          }
        }

        .active-desc {
          height: 32rpx;
          line-height: 32rpx;
          font-size: 24rpx;
          margin-top: 15rpx;
          color: #999;
        }
      }

      .ac-r-right {
        text-align: center;

        .time-title {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          color: #666;
        }

        .count-down {
          font-family: DIN-Medium;

          .day-num {
            height: 40rpx;
            padding: 0 4rpx;
            display: inline-block;
            background-color: #000000;
            color: #ffffff;
            border-radius: 6rpx;
            text-align: center;
            line-height: 40rpx;
            font-size: 28rpx;
          }

          .day-text {
            display: inline-block;
            line-height: 40rpx;
            color: #333;
            font-size: 24rpx;
            margin: 0 8rpx;
          }
        }
      }
    }
  }

  .goods-info-main {
    transform: none;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 12rpx;

    .lap-info {
      display: flex;
      font-size: 24upx;

      .lap-li {
        text-align: center;
        flex: 3;
        padding: 0 20upx;

        .laprice-text {
          font-size: 28upx;
          font-weight: 600;
          color: #ff4d01;
        }

        .laprice-goods-num {
          color: #333333;
        }
      }
    }

    .top-title {
      .title {
        width: 550rpx;
        font-size: 32rpx;
        letter-spacing: 1px;
        color: #2a2a2a;
        font-weight: 500;

        .goods-brand {
          letter-spacing: 0;
          font-weight: 400;
          padding: 0 16upx;
          height: 40rpx;
          line-height: 40rpx;
          border-radius: 40rpx;
          font-size: 24rpx;
          font-weight: 500;
          display: inline-block;
          color: #ffffff;
          margin-right: 16rpx;
        }
      }

      .share-btn {
        text-align: center;
        font-size: 22rpx;
        color: #666;

        .u-icon {
          margin-bottom: 2rpx;
        }
      }
    }

    .describe {
      font-size: 28rpx;
      color: #9a9a9a;
      padding-top: 20rpx;
      font-weight: 500;
      color: #e02020;
    }

    .active-box {
      margin-top: 40rpx;

      .row {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

        .text {
          font-size: 28upx;
          color: #9a9a9a;
          margin-right: 40upx;
        }

        .content {
          .ac-li {
            margin-bottom: 10upx;

            .ac-label {
              background-color: #fa6400;
              padding: 0 16upx;
              height: 40rpx;
              line-height: 40rpx;
              border-radius: 40rpx;
              font-size: 20rpx;
              font-weight: 500;
              display: inline-block;
              color: #ffffff;
              margin-right: 16rpx;
            }

            .ac-activityTitle {
              display: inline-block;
              font-size: 24upx;
            }

            .ac-value {
              font-size: 24upx;
              padding-top: 10rpx;

              .ac-p {
                color: $price-color;
              }
            }
          }
        }
      }
    }
  }
}

.info-box {
  padding: 16rpx 30upx;
  background-color: #fff;
  border-radius: 12upx;
  transform: translateY(-48rpx);
  margin-top: 16rpx;

  .row {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    line-height: 80rpx;

    .text {
      font-size: 28upx;
      color: #9a9a9a;
      margin-right: 40upx;
    }

    .content {
      .conversion {
        display: inline-block;
        margin-right: 10rpx;
      }

      .no-sel {
        color: #9a9a9a;
      }

      .service-li {
        display: inline-block;
        font-size: 22rpx;
        color: #6c6c6c;
        margin-left: 20rpx;
        -webkit-line-clamp: 1;

        .service-icon {
          font-size: 28rpx;
          margin-right: 12rpx;
        }

        .icon {
          width: 28rpx;
          height: 28rpx;
          border-radius: 4rpx;
          margin-right: 12rpx;
        }
      }
    }

    .arrow {
      position: absolute;
      right: 0;

      .icon {
        color: #afafaf;
      }
    }
  }
}

.group-ul {
  .group-li {
    background-color: #ffffff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;

    .float_left {
      .left-scroll {
        width: 430rpx;
        white-space: nowrap;

        .goods-li {
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;

          image {
            display: block;
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
            margin: 0 auto;
          }

          text-align: center;

          .goods-name {
            width: 150rpx;
            height: 36rpx;
            line-height: 36rpx;
            margin-top: 10rpx;
            font-size: 24rpx;
            -webkit-line-clamp: 1;
          }
        }

        .plus-icon {
          vertical-align: middle;
          display: inline-block;
          line-height: 150rpx;
          padding: 0 10rpx;
          height: 200rpx;
        }
      }
    }

    .dy-icon {
      padding: 0 10rpx;
      line-height: 150rpx;
      padding: 0 10rpx;
      height: 200rpx;
      color: #cecece;

      .ibonicon {
        font-size: 26rpx;
      }
    }

    .price-right {
      color: #666666;
      font-size: 24rpx;
      text-align: center;
      width: 190rpx;

      .group-price {
        font-family: DIN-Medium;

        .primary-color {
          font-weight: 700;
          font-size: 28rpx;
        }
      }

      .save-price {
        font-family: DIN-Medium;
        padding: 10rpx 0;
      }

      .buy-btn {
        line-height: 56rpx;
        height: 56rpx;
        border-radius: 8rpx;
        text-align: center;
        color: #ffffff;
        width: 150rpx;
        margin: 10rpx auto 0;
      }
    }
  }
}

.setMeal_more {
  color: #999;
  text-align: center;
  font-size: 24rpx;
}

.description {
  padding-bottom: 100upx;

  .title {
    width: 100%;
    height: 74upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: #999;
  }
}

.footer {
  position: fixed;
  bottom: 0upx;
  width: 100%;
  padding: 12upx 30rpx;
  background-color: #ffffff;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px -3rpx 32rpx 0px rgba(156, 170, 175, 0.16);

  .icons {
    height: 74upx;

    .box {
      height: auto;
      margin-left: 32rpx;
      display: inline-block;
      text-align: center;
      position: relative;

      .u-icon {
        margin-bottom: 4rpx;
      }

      .text {
        display: flex;
        justify-content: center;
        width: 100%;
        font-size: 20upx;
        color: #3c3c3c;
      }

      &:first-child {
        margin-left: 10rpx;
      }
    }
  }

  .btn {
    flex: 1;
    display: flex;
    margin-left: 20rpx;

    .buy {
      border-radius: 37upx;
      height: 74upx;
      flex: 1;
      color: #ffffff;
      display: inline-block;
      line-height: 74upx;
      text-align: center;
      font-size: 28upx;

      &:first-child {
        margin-right: 10rpx;
      }
    }

    &.single-btn {
      .buy {
        width: 100%;
        margin-right: 0;
        flex: 1;
      }
    }
  }
}

.popup {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: none;

  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .layer {
    position: fixed;
    z-index: 22;
    bottom: -70%;
    width: 100%;
    padding: 0 4%;
    height: 70%;
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

    .content {
      width: 100%;
      padding: 20upx 0;
    }

    .btn {
      width: 100%;
      height: 100upx;

      .button {
        width: 100%;
        height: 80upx;
        border-radius: 40upx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f47952;
        font-size: 28upx;
      }
    }
  }

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.2s linear both;
    }

    .layer {
      animation: showLayer 0.2s linear both;
    }
  }

  &.hide {
    display: block;

    .mask {
      animation: hidePopup 0.2s linear both;
    }

    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }

  &.none {
    display: none;
  }

  &.service {
    .row {
      margin: 30upx 0;

      .title {
        font-size: 30upx;
        margin: 10upx 0;
      }

      .description {
        font-size: 28upx;
        color: #999;
      }
    }
  }

  &.spec {
    .title {
      font-size: 30upx;
      margin: 30upx 0;
    }

    .sp {
      display: flex;

      view {
        font-size: 28upx;
        padding: 5upx 20upx;
        border-radius: 8upx;
        margin: 0 30upx 20upx 0;
        background-color: #f6f6f6;

        &.on {
          padding: 3upx 18upx;
          border: solid 1upx #f47925;
        }
      }
    }

    .length {
      margin-top: 30upx;
      border-top: solid 1upx #aaa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20upx;

      .text {
        font-size: 30upx;
      }

      .number {
        display: flex;
        justify-content: center;
        align-items: center;

        .input {
          width: 80upx;
          height: 60upx;
          margin: 0 10upx;
          background-color: #f3f3f3;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;

          input {
            width: 80upx;
            height: 60upx;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 26upx;
          }
        }

        .sub,
        .add {
          width: 60upx;
          height: 60upx;
          background-color: #f3f3f3;
          border-radius: 5upx;

          .icon {
            font-size: 30upx;
            width: 60upx;
            height: 60upx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

.share {
  display: none;

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.15s linear both;
    }

    .layer {
      animation: showLayer 0.15s linear both;
    }
  }

  &.hide {
    display: block;

    .mask {
      animation: hidePopup 0.15s linear both;
    }

    .layer {
      animation: hideLayer 0.15s linear both;
    }
  }

  &.none {
    display: none;
  }

  .mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 11;
  }

  .layer {
    width: 92%;
    position: fixed;
    z-index: 12;
    padding: 0 4%;
    top: 100%;
    background-color: rgba(255, 255, 255, 0.9);

    .list {
      width: 100%;
      display: flex;
      padding: 10upx 0 30upx 0;

      .box {
        width: 25%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        image {
          width: 13.8vw;
          height: 13.8vw;
        }

        .title {
          margin-top: 10upx;
          display: flex;
          justify-content: center;
          width: 100%;
          font-size: 26upx;
        }
      }
    }

    .btn {
      width: 100%;
      height: 100upx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28upx;
      border-top: solid 1upx #666666;
    }

    .h1 {
      width: 100%;
      height: 80upx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34upx;
    }
  }
}

.coupon-box {
  .row {
    .content {
      .coupon-li {
        display: inline-block;
        width: 120upx;
        background-color: $price-color;
        color: #ffffff;
        line-height: 30upx;
        font-size: 18upx;
        text-align: center;
      }
    }
  }
}

.share-tit {
  line-height: 80upx;
  text-align: center;
  font-size: 32upx;
}

.share-cancel {
  line-height: 80upx;
  text-align: center;
  font-size: 28upx;
  border-top: 1px solid #f4f4f4;
}

.share-ul {
  display: flex;
  padding: 50upx 0;

  .share-li {
    flex: 3;

    .share-btn {
      background-color: #ffffff;
      font-size: 26upx;

      &::after {
        border: 0 none;
      }

      .icon-view {
        display: inline-block;
        width: 100upx;
        height: 100upx;
        border-radius: 100%;
        background-color: #18b566;
        line-height: 100upx;
        text-align: center;
        margin-bottom: 10upx;
      }
    }
  }
}

.poster-view {
  // width: 600upx;
  // margin: 0 auto;
}

.service-box {
  .content {
    width: 560rpx;
    -webkit-line-clamp: 1;

    .service-li {
      display: inline-block;
      color: #666666;
      font-size: 24rpx;
      margin-right: 30rpx;

      .icon {
        width: 50rpx;
        height: 50rpx;
        border-radius: 4rpx;
      }

      .ibonfont {
        margin-right: 10rpx;
        font-size: 24rpx;
        color: $uni-color-primary;
      }
    }
  }
}

.service-pop {
  .title {
    line-height: 100rpx;
    height: 100rpx;
    font-size: 32rpx;
    text-align: center;
    color: #222;
  }

  .service-ul {
    padding: 0 30rpx;
    max-height: 430rpx;
    overflow-y: auto;
    width: 100%;

    .service-li {
      font-size: 28rpx;
      padding: 24rpx 0;

      .icon {
        width: 32rpx;
        height: 32rpx;
        border-radius: 4rpx;
        margin-right: 20rpx;
      }

      .ibonfont {
        font-size: 32rpx;
        color: $uni-color-primary;
        margin-right: 20rpx;
      }

      .desc {
        padding-left: 54rpx;
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .confirm-btn {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ffffff;
    background-color: $uni-color-primary;
    margin-top: 30rpx;
  }
}
</style>
